<template>
  <div class="p-[20px] bg-white">
    <vxe-grid v-bind="gridOptions" />
  </div>
</template>

<script lang="ts" setup>
import PaymentSplitAPI from "@/api/split";
import { useDict } from "@/composes/useDict";
import { reactive } from "vue";
import { VxeGridProps } from "vxe-table";

interface RowVO {
  [key: string]: any;
}

const router = useRouter();

const gridOptions = reactive<VxeGridProps<RowVO>>({
  showOverflow: true,
  border: true,
  height: 548,
  rowConfig: {
    keyField: "id",
  },
  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
  },
  toolbarConfig: {
    custom: true,
  },
  layouts: ["Top", "Form", "Table", "Bottom", "Pager"],
  formConfig: {
    // data: {
    //   createdAt: "",
    //   email: "",
    //   nickname: "",
    // },
    items: [],
  },
  proxyConfig: {
    form: true,
    // 对应响应结果 { result: [], page: { total: 100 } }
    ajax: {
      // 接收 Promise 对象
      query: ({ page, form }) => {
        return PaymentSplitAPI.getSplitList({
          ...form,
          pageNum: page.currentPage,
          size: page.pageSize,
        });
      },
    },
  },
  columns: [
    { type: "seq", width: 70, fixed: "left" },
    { title: "支付时间", field: "createdAt", minWidth: 160 },
    {
      title: "商家注册名称<br/>商家号",
      type: "html",
      align: "center",
      field: "registerName",
      minWidth: 160,
      formatter: ["doubleProp", "merCupNo"],
    },
    {
      title: "商家订单号<br/>支付交易流水号",
      type: "html",
      align: "center",
      field: "orderCode",
      minWidth: 160,
      formatter: ["doubleProp", "tradeNo"],
    },
    // {
    //   title: "支付通道<br/>终端号",
    //   type: "html",
    //   align: "center",
    //   formatter: ["doubleProp", "termProfessionNo"],
    //   field: "channelTypeName",
    //   minWidth: 160,
    // },
    {
      title: "商家分账指令流水号<br/>分账计算类型",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "separateType"],
      field: "separateCode",
      minWidth: 160,
    },
    {
      title: "分账总金额<br/>分账数值",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "separateValue"],
      field: "totalSeparatePrice",
      minWidth: 160,
    },
    {
      title: "分账接收方",
      field: "separateRecvNo",
      minWidth: 160,
    },
    {
      title: "分账金额<br/>分账状态",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "statusName"],
      field: "separateValue",
      minWidth: 160,
    },
    {
      title: "剩余可分账金额",
      field: "subSeparatePrice",
      minWidth: 160,
    },
  ],
});

const initFormConfig = (dicts: any) => {
  console.log(dicts);
  if (gridOptions.formConfig) {
    gridOptions.formConfig.items = [
      // 商家名称
      {
        field: "name",
        title: "",
        span: 6,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "商家名称",
          },
        },
      },
      {
        field: "storeCode",
        title: "",
        span: 6,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "商家编号",
          },
        },
      },
      {
        field: "merchantNo",
        title: "",
        span: 6,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "订单号",
          },
        },
      },
      {
        field: "merchantNo",
        title: "",
        span: 6,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "支付单号",
          },
        },
      },
      {
        field: "channelType",
        title: "",
        span: 6,
        itemRender: {
          name: "ElSelect",
          options: dicts.channelTypeList,
          props: {
            placeholder: "支付通道",
          },
        },
      },
      {
        field: "status",
        title: "",
        span: 6,
        itemRender: {
          name: "ElSelect",
          options: dicts.channelTypeList,
          props: {
            placeholder: "分账状态",
          },
        },
      },
      {
        field: "createdAt",
        title: "",
        span: 6,
        itemRender: {
          name: "ElDatePicker",
          props: {
            type: "daterange",
            startPlaceholder: "开始时间",
            endPlaceholder: "结束时间",
          },
        },
      },
      // 搜索按钮
      {
        itemRender: {
          name: "VxeButtonGroup",
          options: [{ type: "submit", content: "搜索", status: "primary" }],
        },
      },
    ];
  }
};

useDict((dict) => {
  initFormConfig(dict);
});
</script>
